<template>
	<keep-alive>
	<view class="centers">
		<view class="buy" v-for="(item,index) in buys" :key='item.id'>
			<image :src="item.icon" lazy-load='true' fade-show='true' mode="widthFix" class="masonry"></image>
			<view class="title">
				<text class="title_t">{{item.type_name}}</text><text class="title_t">{{item.price}} SMK</text>
				<view class="title_f">
					<text>总储量:{{item.reserve}} </text>
				</view>
			</view>
			<view class="yuans" :class="{yuan:arr.includes(index)}" @tap="selecter(index,item.id,item.type_id,item.type_name,item.price)"></view>
		</view>
		<view class="btn" @tap="confrim">
			确认购买
		</view>
	</view>
	</keep-alive>
</template>

<script>
	export default {
		data() {
			return {
				buys: [],
				arr: [],
				List: [],
				flag: false,
				
			}
		},
		onNavigationBarButtonTap(){
			uni.startPullDownRefresh({
				success: () => {
						uni.navigateTo({
							url:'ore_buy'
						})
				}
			});
			},
		onShow() {
			//矿机列表
			this.buy()
			this.arr = []
			this.List = []
		},

		methods: {
			selecter(index, id, type_id, name, price) {
				if (this.arr.includes(index)) {
					this.arr = this.arr.filter(function(ele) {
						return ele != index;
					});
				} else {
					let buys = {}
					buys = {
						id: id,
						userId: uni.getStorageSync('userinfo').userId,
						type_id: type_id,
						type_name: name,
						price: price,
						count: 1
					}
					this.arr.push(index);
					this.List.push(buys);
				}
			},
			confrim() {
				if (!this.arr.length) {
					this.$sToast('请勾选矿机')
					return
				}
				this.$open('ore_affirm?list='+ JSON.stringify(this.List) )
			},
			buy() {
				this.$ajax(
					this.apiList.MachineryType, {},
					"POST"
				).then(res => {
					// this.$sToast(res)
					// console.log(res)
					this.buys = res.data
					// this.buys.forEach(item => {
					// 	item.selecter = this.flag
					// })
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.centers {
		box-sizing: border-box;
		background-color: #0E1B45;
		padding: 30upx;
		height: 100%;
		width: 100%;

		.buy {
			width: 100%;
			height: 180upx;
			border-radius: 10upx;
			background-color: rgba(13, 29, 76, 1);
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20upx;
			padding: 40upx;
			border: 1upx solid #20D6D9;
			.masonry {
				width: 100upx;
			}

			.title {
				.title_t {
					font-size: 36upx;
					font-family: PingFang SC;
					font-weight: bold;
					margin-right: 50upx;
					color: #fff;
				}

				.title_f {
					margin-top: 20upx;

					text {
						font-size: 26upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #fff;
					}
				}
			}

			.selecter {
				width: 46upx;
			}

			.yuan {
				background: url(../../static/bizhan/s13.png) no-repeat;
				background-size: 100%;
				width: 50upx;
				height: 50upx;
			}

			.yuans {
				width: 50upx;
				height: 50upx;
				border-radius: 50%;
				border: 1upx solid rgba(255,255,255,0.3);
			}
		}

		.btn {
			width: 100%;
			height: 90upx;
			background-color:#00B34D;
			color: #fff;
			text-align: center;
			line-height: 90upx;
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: 500;
			border-radius: 10upx;
			margin-top: 30upx;
		}
	}
</style>
